<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ include file="static/imgHost.jsp"%>
<!doctype html>

<!--告诉浏览器当前网页使用的是中文，声明后将有便于外部程序对网页进行翻译，例如有道翻译等等-->
<html lang="zh-CN">

<head>

<!--编码格式为 utf-8(国际编码)-->
<meta charset="utf-8">

<!--设置页面关键字-->
<meta name="keywords" content="设置网站关键字">

<!--设置页面的描述-->
<meta name="description" content="设置页面的描述,建议在200字以内">

<!--设置浏览器优先使用急速模式-->
<meta name="renderer" content="webkit">

<!--禁止移动设备UC浏览器对字体大小的控制-->
<meta name="wap-font-scale" content="no">

<!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame(谷歌浏览器内嵌框架)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--建立一个视觉窗口, 可视区域宽度等于设备宽度, 初始缩放比例为1倍, 最小缩放比例为1倍, 最大缩放比例为1倍, 禁止用户进行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

<title>搜索页</title>

<link rel="stylesheet" href="<%=basePath%>css/zhicwl.css">
<link rel="stylesheet" href="<%=basePath%>css/zhicwl-bj.css">
<link rel="stylesheet" href="<%=basePath%>css/zhicwl-zj.css">

<script src="<%=basePath%>js/fontSize.js"></script>
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F6eTaN7pws2E23tdZL5BHPQeRWBXyLbW"></script>
<style>
body{ background: #000;}
</style>
<!--雷达扫描搜索特效-->
<link rel="stylesheet" href="<%=basePath%>css/ldcm.css"/>
</head>

<body>
<audio preload="preload" id="car_audio" src="<%=basePath%>images/5354.mp3" loop="loop"></audio>
<header class="tuskop overflow-hidden padding-lr-15 padding-tb-15">
  <a class="float-left color1" href="javascript:void(0)" onclick="ranking()">排行榜</a>
  <a class="float-right color1" href="<%=basePath%>member/income_details">查看明细</a>
</header>

<div class="container overflow-hidden">

  <div id="load">
  
    <div class="border1">
      <div class="pointer pointerAnim asmesr"></div>
			
      <!--附近店铺-->
      <div class="user"></div>
      <!--/附近店铺-->
      
      <!--中心LOGO-->
      <div class="bldtr">
        <div class="border2">
          <div class="border3">
            <div class="radar">
            	<span class="avatar">
            		<c:choose>
						<c:when test="${empty memberModel.avatar}"><img src="<%=basePath%>images/img51.png"></c:when>
						<c:otherwise><img src="${memberModel.avatar}" width="100%"></c:otherwise>
					</c:choose>
            	</span>
            </div>
          </div>
        </div>
      </div>
      <!--/中心LOGO-->
      
    </div>
    
    <div class="symksl color1" id="load_addesss_info">
    	<strong class="font-weight-normal" id="load_info">正在获取您的当前位置</strong>
    </div>
    <div class="symksl color1" id="scan_count_down" style="display:none;">
      <strong id="minute_show" class="font-weight-normal">0</strong>:<strong id="second_show" class="font-weight-normal">08</strong> 
    </div>
    <div class="awldvd padding-lr-15">您还有<span>${memberModel.search_num}</span>次机会</div>

		<!--获奖名单-->
		<script src="<%=basePath%>js/jquery.SuperSlide.2.1.2.js"></script>
		<div class="hjtistie padding-lr-15">
			<div class="bd">
				<ul>
					<li><a>城市寻宝用户**获得了 电视机一台</a></li>
					<li><a>城市寻宝用户**获得了 海尔空调一台</a></li>
					<li><a>城市寻宝用户**获得了 苹果手机一台</a></li>
					<li><a>城市寻宝用户**获得了 小米笔记本电脑一台</a></li>
					<li><a>城市寻宝用户**获得了 格力空调一台</a></li>
				</ul>
			</div>
		</div>
        
		<script type="text/javascript">
		jQuery(".hjtistie").slide({mainCell:".bd ul",autoPage:true,effect:"topLoop",interTime:1500,delayTime:150,autoPlay:true,vis:1});
		</script>   
    <!--/获奖名单--> 
    
    <!--<div class="anlswt button1 padding-lr1 margin-top5" style="display:inline-block;"><a href="###" class="background1 backg1-active color1 border-radius5">再试一次！</a></div>-->
    
  </div>
</div>

<!--弹出抽奖界面-->
<div class="tcslmd-fixed"></div>
<div class="tcslmd" id="red_packet_rel"></div>
<!--/弹出抽奖界面-->

<script type="text/javascript">
//倒计时
var intDiff = parseInt(7);//倒计时总秒数量
var isShowRednPacketInfo = false;
var isBandRedPacket = false;
var user_id = 0;
var redPacketId = 0;
var eventId = 0;
var ctx = "${pageContext.request.contextPath}";
var city = "";
var province = "";

function playAudio() {
	 var audio = $('#car_audio');
    if (audio.attr('src') == undefined) {
        audio.attr('src', audio.data('src'));
    }
    audio[0].play();
}

function stopAudio() {
	 var audio = $('#car_audio');
    if (audio.attr('src') == undefined) {
        audio.attr('src', audio.data('src'));
    }
    audio[0].pause();
}

var addComp;
$(function() {
	$("#scan_count_down").hide();
	$("#load_addesss_info").show();
	
	var geoc = new BMap.Geocoder();
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS) {
			var mk = new BMap.Marker(r.point);
			geoc.getLocation(r.point, function(rs){
				addComp = rs.addressComponents;
				getShop(r.point.lng, r.point.lat);
			});
		}
		else {
			alert('failed'+this.getStatus());
		}
	},{enableHighAccuracy: true});

});

function closeRedPacket() {
	$(".tcslmd-fixed, .tcslmd").hide();
	if (isBandRedPacket == true) {
		if (user_id != 0 && redPacketId != 0 && eventId != 0) {
			$.ajax({
		        type : "post",  
		        url : ctx+"/packet/update_coin_num",
		        dataType:"json",
		        data: {
		        	id : user_id,
		        	redPacketId : redPacketId,
		        	eventId: eventId
		        }
	        });
		}
	}
}

function getShop(longitude, latitude) {
	var imgHost = "<%=imgHost%>";
	$.ajax({
        type : "post",  
        url : ctx+"/packet/coordinate_range_list",
        dataType:"json",
        data: {
        	longitude : longitude,
        	latitude : latitude,
        	distance : 50
        },
        success: function(data) {
        	if (data.code == -1) {
        		window.location.href = ctx+"/again_login.jsp?page=/member/u/searchRedPacket";
        	} else if (data.code == 0) {
        		city = addComp.city;
        		province = addComp.province;
        		$("#load_info").html("您所在位置："+ addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
            	if (data.shopList.length > 0) {
            		isShowRednPacketInfo = true;
            		var span = "";
            		for (var i =0; i<data.shopList.length; i++) {
            			var locat_english = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
            			locat_english.sort(function(){ return 0.5 - Math.random() });
            			var avatar = ctx+"/images/img51.png";
            			if (null != data.shopList[i].pic && data.shopList[i].pic != "") {
            				avatar = imgHost+data.shopList[i].pic;
            			}
            			span += "<span class='user"+locat_english[i]+"'><img src='"+avatar+"' width='100%'></span>";
            		}
            		$(".user").html(span);
            		
            		if (null != data.redPacket) {
            			var html = '';
            			if (data.redPacket.code==0) {
            				isBandRedPacket = true;
            				html += '<img class="tcslmd-img" src="'+ctx+'/images/tcck.png">';
            				html += '<div class="guanbks" onclick="closeRedPacket()"></div>';
            				html += '<div class="dtmksl">';
            				var avatar = ctx+"/images/img51.png";
            				if (null != data.redPacket.shop.pic && data.redPacket.shop.pic != "") {
            					avatar = imgHost+data.redPacket.shop.pic;
                			}
            				html += '<img class="dtmksl-img" id="shop_user_avatar" src="'+avatar+'">';
            				html += '<h4>'+data.redPacket.shop.name+'</h4>';
            				html += '<h5>'+data.redPacket.shop.nick_name+'发了一个红包，金额随机</h5>';
            				html += '<h3>恭喜发财，大吉大利！</h3>';
            				html += '<b><a href="javascript:void(0)" onclick="bindRedPacket()">拆红包</a></b>';
            				html += '</div>';
            				user_id = data.redPacket.shop.user_id;
            				redPacketId = data.redPacket.redPacket.id;
            				eventId = data.redPacket.redPacket.eventId;
                    	} else if (data.redPacket.code==1 || data.redPacket.code == 2) {
                    		isBandRedPacket = false;
                    		html += '<img class="tcslmd-img" src="'+ctx+'/images/tcck-2.png">';
            				html += '<div class="guanbks" onclick="closeRedPacket()"></div>';
            				html += '<div class="dtmksl">';
                    		html += '<img style="border-radius: 0; width: 186px; height: auto; margin-top: 0;" class="dtmksl-img" src="'+ctx+'/images/img55.png">';
                    		html += '<h4 style="margin-top: -6px;">红包君走丢了...</h4>';
                    		html += '<h5 style="text-align: left; padding: 0 15px; line-height: 1.5; margin-top: 12px; font-size: 12px;">';
                    		html += '邀请更多好友参与寻宝红包游戏中，获得更多金币。<br> 分享朋友圈，增加 <font color="#F5A527">1</font>次扫描次数！';
                    		html += '</h5>';
                    		html += '<div class="kalwrc">';
                    		html += '<div><button type="button" onclick="refresh()" class="zhicwl-btn zhicwl-btn-warning" style="transition: all 0.15s linear;">再来一次</button></div>';
                    		html += '<div><button type="button" class="zhicwl-btn zhicwl-btn-warning" style="transition: all 0.15s linear;">分享朋友圈</button></div>';
                    		html += '</div>';
                    		html += '</div>';
                    	}
            			html += '<h6>新年好手气</h6>';
            			$("#red_packet_rel").html(html);
            		}
            		setTimeout(function() {
            			$("#load_info").html("开始搜索红包");
            			
            			playAudio();
            	        document.addEventListener("WeixinJSBridgeReady", function () {
            	            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            	                network = e.err_msg.split(":")[1];  //结果在这里
            	                playAudio();
            	            });
            	        }, false);
            			
            			setTimeout(leida, 500);
            		}, 1000);
            	} else {
            		isShowRednPacketInfo = false;
            		setTimeout(function(){
            			$("#load_info").html("开始搜索红包");
            			
            			playAudio();
            	        document.addEventListener("WeixinJSBridgeReady", function () {
            	            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            	                network = e.err_msg.split(":")[1];  //结果在这里
            	                playAudio();
            	            });
            	        }, false);
            			
            			setTimeout(function(){
            				$("#load_info").html("很遗憾，附近还没有店铺可以搜索红包");
            			}, 500);
            		}, 1000);
            	}	
        	} else {
        		setTimeout(function(){
    				$("#load_info").html(data.msg);
    			}, 500);
        	}
        }
    });
}

function refresh() {
	window.location.reload();
}

function timer(intDiff) {
	$(".user span").removeClass("flip shadow").hide();
	var timer1 = window.setInterval(function(){
		var day=0,
		hour=0,
		minute=0,
		second=0;//时间默认值		
		if(intDiff > 0) {
			day = Math.floor(intDiff / (60 * 60 * 24));
			hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
			minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
			second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
		}
		
		//if (minute <= 9) minute = '0' + minute;
		if (second <= 9) second = '0' + second;
		//$('#day_show').html(day+"天");
		//$('#hour_show').html('<s id="h"></s>'+hour+'时');
		$('#minute_show').html('<s></s>'+minute);
		$('#second_show').html('<s></s>'+second);
		intDiff--;
		
		//判断是否到达指定时间时间
		if(intDiff<0) {
			clearInterval(timer1);	
			$(".pointer").removeClass("asmesr");
			// $(".anlswt").css("visibility","visible");
			intDiff = parseInt(10);//倒计时总秒数量
			if (isShowRednPacketInfo == true) {
				$(".tcslmd-fixed, .tcslmd").show();
				$(".tcslmd").addClass("dxlsmr");
			}
			
			stopAudio();
	        document.addEventListener("WeixinJSBridgeReady", function () {
	            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
	                network = e.err_msg.split(":")[1];  //结果在这里
	                stopAudio();
	            });
	        }, false);
			
			//alert("雷达扫描时间已到，没有扫到任何内容")
		};
	}, 1000);
}

//雷达旋转扫描搜索条件
function leida(){
	$("#load_addesss_info").hide();
	$("#scan_count_down").show();
	
	timer(intDiff);
	//$(".pointer").addClass("pointerAnim");  //添加雷达旋转动画
	var timeout = 1000;  //每隔1000ms
	var index = 0;
	sqwe = setInterval(function(){
	if(index >= $(".user span").length) {
		index = 0;
		clearInterval(sqwe);  //结束循环
		$(".user span").removeClass("flip").addClass("shadow")
	} else {
		$(".user span").eq(index++).fadeIn(timeout).addClass("flip")
	}
	},timeout);
}

function bindRedPacket() {
	if (redPacketId > 0) {
		window.location.href = ctx+"/packet/bindRedPacket?id="+redPacketId + "&token=${token}";
	}
}
// 排行榜
function ranking() {
	if(city != "" && province != "") {
		window.location.href = ctx+"/ranking?city="+city+"&province="+province;
	} else {
		alert("正在获取您的当前位置，请稍等...");
	}
}
//结果处理
/*
$(".anlswt").click(function(){
	clearInterval(sqwe);
	$("#minute_show").text("0");
	$("#second_show").text("12");
	timer(intDiff);
	$(".pointer").addClass("asmesr");	
	$(this).css("visibility","hidden")	
	$(".user span").removeClass("flip shadow").hide();
	leida();	
})
*/
</script>
<!--/雷达扫描搜索特效-->
<script src="<%=basePath%>js/zhicwl.js"></script>
  
</body>
</html>